<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>小视频</title>
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />
	</head>
	<style>
		/*transparent*/
		html,body {
			background-color: transparent !important;
			 
			width: 100%;
			height: 100%;
		}
		
		#sx1,#sx2{
			position: fixed;
			 width: 100%;
			left: 0px;
		}
		#sx1{
			top: 0px;
			z-index: 1;
			height: 100%;
		}
		#sx2{
			bottom: 0px;
			z-index: 2;
			padding-top: 2rem
		}
		.sx-1{
			color: #fff;
			 
		}
		.sx-1 img.aui-img-round {
			width: 100% !important;
			height: 100% !important;
			max-width: 100% !important;
			max-height: 100% !important;
		}
		.sx-1 #guanzhu{
			height:1.2rem;
			line-height:1.2rem;
			padding: 0.3 0.7rem;
			font-size: 0.6rem;
			margin-top: 0.2rem
		}
		.sx-1 .aui-list,.aui-list li{
			border: 0px !important;
			background: none !important;
		}
		.sx-1 .aui-list-item-media{
			width: 1.5rem;
			height: 1.5rem;
			padding: 0;
			margin-right: 0.5rem
		}
		.sx-1 .aui-padded-r-10{
			line-height: 1.6rem; 
			font-size: 0.7rem;
			color: #fff;
		}
		.sx-2{
			padding: 0 0.75rem;
			color: #fff;
			font-size: 0.8rem
		}
		.sx-3{
			overflow: hidden;
		}
		.sx-3 .aui-bar{
			background: none !important;
			border: 0 !important;
			position: relative !important;
			color: #fff;
		}
		.sx-3 .aui-bar-tab .sx3-1{
			background: url('../image/xiaoshipin_img-sx-3.png') no-repeat center;
			background-size: 100%;
		}
		.sx-3 .aui-bar-tab-item {
			width: 3.5rem;
		}
		.sx-3 .aui-bar-tab-item span{
			font-size: 0.6rem;
		}
		.sx-3 .sx3-1{
			width: 80%;
			padding-right: 0.75rem;
			display: block;
			line-height: 2.5rem;
		}
		.sx-3 .search-input{
			font-size: 0.6rem
		}
		.pingZanColor{
			color: #F85959 !important;
		}
		.sx-4{
			position: fixed;
			bottom: 0rem;
			right:0.75rem;
			z-index: 4
		}
		.sx-4 .aui-bar-tab-item{
			text-align: center;
			margin: 0 auto;
			line-height: 1rem;
			padding-top:1rem;
		}
		.sx-4 .aui-bar-tab-item img{
			width: 1.2rem;
			margin: 0 auto;
		}
		.sx-4 .aui-bar-tab-item i{
			font-size: 1.2rem;
			margin: 0 auto;
			text-align: center;
			display: block;
		}
		.sx-4 .aui-bar-tab-item span{
			display: block;
			text-align: center;
			font-size: 0.7rem;
			color: #fff;
		}
		.sx-4 .sx3-5 img{
			width: 2.5rem;
			margin-bottom: 0.5rem;
		}
	</style>
	<body >
		<script id="fx-list" type="text/x-dot-template">
		<div id="sx1"></div>
		<div id="sx2">
			<div class="sx-1"> 
				<ul class="aui-list aui-media-list">
					<li class="aui-list-item aui-list-item-middle">
						<div class="aui-media-list-item-inner">
							{{? sx.uid}}
							<div class="aui-list-item-media" Tapmode onclick="_url({id:{{= sx.uid }}},'u_win')">
								<img src="../image/touxiang.png" id="ffxiangImgCache" ffxiang-src="{{= sx.user.img }}" class="aui-img-round aui-list-img-sm">
							</div>
							<div class="aui-list-item-inner">
								<div class="aui-pull-left aui-padded-r-10" style="font-size: 0.8rem;" Tapmode onclick="_url({id:{{= sx.uid }}},'u_win')">
									{{= sx.user.username }}
								</div>
								<div class="aui-pull-left aui-btn aui-btn-danger" id="guanzhu" data-id="1" Tapmode onclick="guanzhu()">
									关注
								</div>
							</div>
							{{?}}
						</div>
					</li>
				</ul>
			</div>
			<div class="sx-2">{{= sx.title }}</div>
			<div class="sx-3">
				<div class="aui-bar aui-bar-tab">
			        <div class="aui-bar-tab-item sx3-1" tapmode onclick="pingAdd()">
			            <div class="search-input">写评论...</div>
			        </div>
			    </div>
			</div>
			 
		</div>
		<div class="sx-4">
				<div class="aui-bar-tab-item sx3-5" Tapmode onclick="_svideo()">
			           <!-- <i class="aui-iconfont aui-icon-laud"></i>-->
			           <img src="../image/sx-xiaoshipin_genpai.png" />
			        </div>
			        <div class="aui-bar-tab-item sx3-3 pingZan" data-id='0' Tapmode onclick="pingZan()">
			           <!-- <i class="aui-iconfont aui-icon-laud"></i>-->
			           <img src="../image/sx-xiaoshipin_zan.png" />
			            <span>{{= sx.zan }}</span>
			        </div>
			        <div class="aui-bar-tab-item sx3-2" tapmode onclick="ping()">
			            <!--<i class="aui-iconfont aui-icon-comment"></i>-->
			            <img src="../image/sx-xiaoshipin_ping.png" />
			            <span id="sx-huifuNum">{{= sx.pingNum }}</span>
			        </div>
			        <div class="aui-bar-tab-item sx3-4" tapmode onclick="fenxiang()">
			            <!--<i class="aui-iconfont aui-icon-share"></i>-->
			            <img src="../image/sx-xiaoshipin_fenxiang.png" />
			            <span style="font-size: 0.6rem;">分享</span>
			        </div>
			</div>
		</script>
		<div id="fx-view"></div>
	</body>
	<script type="text/javascript" src="../script/zepto.min.js"></script>
	<script type="text/javascript" src="../script/doT.js"></script>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/ffxiang.js"></script>
	<script type="text/javascript">
		var aid,xiaoshipin_ping_win=0,sx,inputField,pingAddPen = 1,pingIds=0,win_index;	// 1已打开  0未打开  ,
		apiready = function() {
			win_index=api.pageParam['win_index'];
			// 向右轻扫
			api.addEventListener({
			    name:'swiperight'
			}, function(ret, err){        
				guanbi()
			});
			// 向左轻扫
			api.addEventListener({
			    name:'swipeleft'
			}, function(ret, err){        
			  // alert('向左轻扫');
			});
			// 向上轻扫
			api.addEventListener({
			    name:'swipeup'
			}, function(ret, err){        
			   if(xiaoshipin_ping_win==0){
			   	ping()
			   }
			});
			// 向下轻扫
			api.addEventListener({
			    name:'swipedown'
			}, function(ret, err){        
			   guanbi()
			});
			sx=api.pageParam
			if(!sx){
				alert("已被删除")
				guanbi()
			}
			//渲染模版
			var evalData = doT.template($api.html($api.byId('fx-list')));
			$api.html($api.byId('fx-view'), evalData());
			$api.fixTabBar($api.dom('.sx-3'))
			$api.fixTabBar($api.dom('.sx-4'))
		 
			api.parseTapmode();
			// 图片缓存本地
			_imageCache();
			guanzhuzan()
			// 屏幕离开
			api.addEventListener({
				name : 'viewdisappear'
			}, function(ret, err) {
				api.setFullScreen({
					fullScreen : false
				});
				// 屏幕离开暂停播放
				api.execScript({
					name : 'xiaoshipin_win',
					frameName : 'xiaoshipin_'+win_index,
					script : 'pause()'
				});
			});
			// 回到屏幕
			api.addEventListener({
				name : 'viewappear'
			}, function(ret, err) {
				api.setFullScreen({
					fullScreen : true
				});
				// 进入屏幕开始播放
				api.execScript({
					name : 'xiaoshipin_win',
					frameName : 'xiaoshipin_'+win_index,
					script : 'start()'
				});
			});
			// 输入框模块
			inputField = api.require('inputField');
			inputField.setInputFieldListener(function(ret, err) {
				if (ret) {
					//_msg(JSON.stringify(ret))
					if (ret.eventType == 'move') {
						if (ret.chatViewH == 0 || ret.chatViewH == -1) {
							pingHide()
							inputField.resignFirstResponder();
						}
					}
				} else {
					_msgz(JSON.stringify(err));
				}
			}); 
		};
		// 获取用户是否赞和关注
		function guanzhuzan(){
			if(!$api.getStorage('user')){
				return;
			}
		//	console.log("sx.uid:"+sx.uid)
			_ajax('api/member/guanzhuzan',function(ret,err){
				if(ret){
					if(ret.zan){
						var a=$('.pingZan')
						a.addClass('pingZanColor');
						a.data('id', '1');
						//$('.pingZan img').attr('src','../image/sx-xiaoshipin_zans.png');
						a.html("<img src=\"../image/sx-xiaoshipin_zans.png\" />\r\n<span> "+(sx.zan ? sx.zan : sx.zan+1)+"</span>");
					}
					if(ret.guanzhu){
						var guanzhuId=$('#guanzhu');
						guanzhuId.removeClass("aui-btn-danger");
						guanzhuId.html("已关注");
						guanzhuId.data('id',"2");
					}
				}
				//console.log(JSON.stringify(ret)+JSON.stringify(err))
			},{aid:sx.id,gz_uid:sx.uid})
		}
		function guanbi() {
			if(xiaoshipin_ping_win == 1){
				// 关闭评论
				api.execScript({
					name : 'xiaoshipin_win',
					frameName : 'xiaoshipin_ping_win',
					script : 'g()'
				});
			 
				return;
			}
			// 关闭输入框
			if(pingAddPen==2){
				inputField.close();
			}
			// 关闭当前页面
			api.execScript({
				name : 'xiaoshipin_win',
				frameName : 'xiaoshipin_'+win_index,
				script : 'winclose();'
			});
			 
		}
	 	function ping(){
	 		xiaoshipin_ping_win=1
	 		var h=api.winHeight;
	 		api.openFrame({
				name : 'xiaoshipin_ping_win',
				url : html_win+'xiaoshipin_ping.html',
				bounces : false,
				rect : {
					x : 0,
					y : h-(h/2),
					w : 'auto', 
					h : h/2,
				},
				bgColor:'rgba(0,0,0,0)',
				animation:{
					type:"movein",                //动画类型（详见动画类型常量）
				    subType:"from_bottom",       //动画子类型（详见动画子类型常量）
				    duration:300    
				},
				pageParam:sx
			})
	 	}
	 	// 设置已打开 
	 	function xiaoshipin_ping_win_url(){
	 		xiaoshipin_ping_win=0;
	 	}
	 	// 赞
		function pingZan() {
			if(!$api.getStorage('user')){
				_msg('请先登录')
				return;
			}
			var a=$('.pingZan');
			var type = a.data('id');
			if (!type) {
				a.addClass('pingZanColor');
				a.data('id', '1');
				a.html("<img src=\"../image/sx-xiaoshipin_zans.png\" />\r\n<span> "+(sx.zan+1)+"</span>");
				_ajax('api/member/zancai',function(ret,err){
					if(ret){
						if(ret.err){
							_msg(ret.err)
						}
					}
				},{aid:sx.id,type:1})
			} else {
				_msg('您已经赞过')
			}
		}
		// 关注
		function guanzhu() {
			if(!$api.getStorage('user')){
				_msg('请先登录')
				return;
			}
			_loading()
			var a=$('#guanzhu')
			// 1关注 2取消关注
			var type = a.data('id')
			if (type == 1) {
				a.text('关注中');
				_ajax('api/member/guanzhu/',function(ret,err){
					_loadingCloes()
					if(ret.ret){
						a.text('已关注')
						a.data('id', 2)
						a.removeClass('aui-btn-danger');
					}else{
						a.text('关注');
						_msg(ret.err)
					}
				},{gz_uid:sx.uid})
			} else if (type == 2) {
				a.text('取消中');
				_ajax('api/member/guanzhuDel/',function(ret,err){
					_loadingCloes()
					if(ret.ret){
						a.text('关注')
						a.data('id', 1)
						a.addClass('aui-btn-danger');
					}else{
						a.text('已关注');
						_msg(ret.err)
					}
				},{gz_uid:sx.uid})
			} 
		}
		// 分享
		function fenxiang(){
			api.execScript({
				name : 'xiaoshipin_win',
				frameName : 'xiaoshipin_'+win_index,
				script : 'fenxiang()'
			});
		}
		//用来判断打开输入框   1 使用open打开  2 使用显示
		function pingAdd(username,pingId) {
			if(!pingId){pingId=0}
			pingIds=pingId;
			if(!_user){
				_login();
				return;
			}
			if(username){
				username='回复   '+username+'：'
			}else{
				username='优质评论将会被优先展示';
			}
			if (pingAddPen == 1) {
				pingAddPen = 2;
				inputField.open({
					bgColor : '#fff',
					lineColor : '#D8D8D8',
					fileBgColor : '#f5f5f5',
					borderColor : '#F4F5F6',
					//					sendImg : 'widget://res/img/sendImg.png',
					autoFocus : true,
					placeholder : username,
					placeholderStyles : {
						color : '#bbb', //字符串类型；占位文字颜色，支持rgb、rgba、#；默认：#696969
						size : 14, //数字类型；占位文字大小；默认：13
						marginL : 5 //数字类型；占位文字距离左边的大小；默认：5
					},
					maxLines : 3,
					sendBtn : {
						bg : '#03a9f4', //字符串类型；发送按钮常态背景色
						bgHighlight : '#0287BF', //字符串类型；发送按钮点击时的高亮背景色
						title : '发送', //字符串类型；发送按钮的标题
						titleSize : '14', //数字类型；发送按钮的标题字体大小
						titleColor : '#fff', //字符串类型；发送按钮标题文字颜色
						corner : 5 //数字类型；发送按钮圆角大小
					},
				}, function(ret, err) {
					if (ret) {
						if (ret.msg == '') {
							_msg('请输入评价');
						} else {
							pingAddTent(ret.msg);
							pingHide()
							inputField.resignFirstResponder();
						}
					} else {
						//_msg(JSON.stringify(err));
					}
				});
			} else {
				inputField.setPlaceholder({
				    placeholder: username
				});
				inputField.becomeFirstResponder(function(ret, err) {
					if (ret.status) {
						 
						setTimeout(function() {
							pingHide(1)
						}, 500)
					} else {
						//alert(JSON.stringify(err));
					}
				});
			}
		}
		// 评论开关   0关 1开
		function pingHide(a){
			if(a==1){
				inputField.show();
				inputField.becomeFirstResponder()
			}else{
				inputField.hide();
				inputField.resignFirstResponder();
			}
			 
		}

		// 插入评论
		function pingAddTent(text) {
			if(text){
				var html=''
//				if(pingIds){
//				 
//				    html += '<li class="aui-ellipsis-2">';
//				    html += '<a>'+_user.username+' ：</a>'+text+'</li>';
//				    $('#fx-huifuList'+pingIds).show();
//				    $('#fx-huifuLists'+pingIds).prepend(html);
//				}else{
//					_msg('发布成功')
//					return;
//				    html += '<li class="aui-list-item aui-padded-b-10">';
//				    html += '<div class="aui-media-list-item-inner">';
//				    html += '<div class="aui-list-item-media">';
//				    html += '<img src="'+_user.img+'" Tapmode onclick="_url({id:'+_user.id+',qian:0,fan:1},\'u_win\');" />';
//				    html += '</div>';
//				    html += '<div class="aui-list-item-inner">';
//				    html += '<div class="aui-list-item-text">';
//				    html += '<div class="aui-list-item-title">';
//				    html += _user.username;
//				    html += '</div>';
//				    html += '<div class="aui-list-item-right">';
//				    html += '<i class="aui-iconfont aui-icon-laud"></i>0'
//				    html += '</div>';
//				    html += '</div>';
//				    html += '<div class="aui-list-item-text" style="color:#333;">';
//				    html += text;
//				    html += '</div>';
//				    html += '<div class="aui-info aui-font-size-12 aui-padded-t-0 aui-padded-b-0">';
//				    html += '<div class="aui-info-item">';
//				    html += '几秒前';
//				    html += '</div>';
//				    html += '<div class="aui-info-item">';
//				    html += '<i class="aui-iconfont aui-icon-comment"  style="color:#4c5276"></i>';
//				    html += '</div>';
//				    html += '</div>';
//				    html += '</div>';
//				    html += '</div>';
//				    html += '</li>';
//				    $('.pingList #fx-view').prepend(html);
//				//   	document.getElementById('here').scrollIntoView() 
//				}
//				$('.qiangshafa').remove();
//				api.execScript({
//				    script : 'pingNum()'
//				});
				console.log('aid:'+sx.id+'pingId:'+pingIds)
				_ajax('api/member/ping',function(ret,err){	
					console.log(JSON.stringify(ret)+JSON.stringify(err))
					api.pageParam['pingNum']++;
					// 更新评论数量
					api.execScript({
						name : 'xiaoshipin_win',
						frameName : 'xiaoshipin_ping',
						script : 'pingnum('+api.pageParam['pingNum']+')'
					});
					$('#sx-huifuNum').text(api.pageParam['pingNum'])
				},{aid:sx.id,content:text,pingId:pingIds})
				_msg('发布成功')
			}
			 
		}
	</script>
</html>